<template>
  <view class="content">
    <!-- 距离顶部的距离 刚好留出状态栏即可 即statusBarHeight -->
    <view
      class="topNav"
      :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }"
    >
      <view class="nav-left"> 耀南 </view>
      <view class="nav-search">
        <input type="text" placeholder="请搜索" placeholder-class="placClass" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navHeight: '', // 导航栏高度
      statusBarHeight: '', // 状态栏高度
    }
  },
  onLoad() {
    //获取手机系统的信息 里面有状态栏高度和设备型号
    let { statusBarHeight, system } = uni.getSystemInfoSync()
    // 注意返回的单位是px 不是rpx
    console.log('状态栏高度是', statusBarHeight + 'px', '设备型号是', system)
    this.statusBarHeight = statusBarHeight
    // 而导航栏的高度则 = 状态栏的高度 + 判断机型的值（是ios就+40，否则+44）
    // 这个高度刚好和胶囊对齐
    this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44)
    console.log(this.navHeight, '导航栏高度')
  },

  methods: {},
}
</script>

<style scoped>
.topNav {
  height: 100rpx;
  background-color: #00aa7f;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.nav-left {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffeb3b;
  margin-right: 30rpx;
  font-style: italic;
}

.nav-search input {
  width: 60%;
  height: 62rpx;
  border-radius: 30rpx;
  padding-left: 25rpx;
  background-color: #f0f8ffa6;
  box-sizing: border-box;
}

.placClass {
  font-size: 24rpx;
  color: #fff;
}
</style>
